<template>
	<div>
		<!-- 内容 -->
		<div class="my">
			<div class="head">
				<img src="../../public/a3.jpg" >
				<p>小天</p>
				<router-link to="/zhuce"><span>修改资料</span></router-link> |
				<!-- <span>修改资料</span> -->
			</div>
			<div class="like">
				<div class="left">
					<p class="p1">3</p>
					<span>关注</span>
				</div>
				<div class="righ">
					<p class="p1">16</p>
					<span>点赞</span>
				</div>
			</div>
			</div>
			<!-- 表格 -->
			<van-grid clickable :column-num="2">
			  <van-grid-item icon="like-o" text="收藏" to="/" />
			  <van-grid-item icon="star-o" text="历史" to="/" />
			</van-grid>
			<!-- 内容 -->
			<van-cell to="/about" title="修改密码" is-link />
			<van-cell title="联系我们" is-link />
			<van-cell title="关于我们" is-link />
			<!-- 退出登入 -->
			<div class="login">
				<button type="button" >退出登入</button>
			</div>
			
			
			
			
			<div class="kuan" style="width: 100%; height: 100px;">
			</div>
		<!-- 底部 -->
		<van-tabbar v-model="active" >
			<van-tabbar-item to="/">
				<span>首页</span>
				<template #icon="props">
					<img :src="props.active ? icon.active : icon.inactive" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/publish" icon="search">发布</van-tabbar-item>
			<van-tabbar-item to="/my" icon="setting-o">我的</van-tabbar-item>
		</van-tabbar>
	</div>


</template>

<script type="text/javascript">
		import {Tabbar,TabbarItem} from 'vant';
		import { Grid, GridItem } from 'vant';
		import { Cell, CellGroup } from 'vant';
		
	export default {
		components: {
			[Tabbar.name]: Tabbar,
			[TabbarItem.name]: TabbarItem,
			[Grid.name]:Grid,
			[GridItem.name]:GridItem,
			[Cell.name]:Cell,
			[CellGroup.name]:CellGroup,
			
		},
		data() {
			return {
				active: 2,
				icon: {
					active: 'https://img01.yzcdn.cn/vant/user-active.png',
					inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
				},
			};
		},
	}
</script>

<style>
	.my{
		width: 100%;
		height: 200px;
		background: url(../../public/a9.jpg) no-repeat;
		background-size: 100%;
	}
	.head{
		width: 100%;
		height: 100px;
	}
	.head img{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		border: 2px solid #ffffff;
		margin-top: 25px;
		margin-left: 25px;
		float: left;
	}
	.head p{
		font-size: 16px;
		color: #fff;
		font-size: 22px;
		padding-top: 40px;
		margin-left: 10px;
		float: left;
	}
	.head span{
		width: 70px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		border-radius: 20px;
		color: #555555;
		background-color: #f3e8df;
		font-size: 12px;
		float: right;
		margin-top: 46px;
		margin-right: 20px;
	}
	.like{
		margin-top: 25px;
		color: #fff;
		font-size: 18px;
	}
	.like .left{
		width: 50%;
		height: 60px;
		text-align: center;
		float: left;
	}
	.like .righ{
		width: 50%;
		height: 60px;
		text-align: center;
		float: left;
	}
	.van-icon-like-o:before {
	color: #ff5500;
	}
.van-icon-star-o:before {
    color: #ff5500;
}	
.login button{
	width: 365px;
	height: 40px;
	background-color: #ffffff;
	color: #FF0000;
	border: none;
	margin: 0 5PX;
	border: 1px solid #F3E8DF;
}

</style>
